<template>
  <div class="KnowledgeTreeList">
    <nav-bar
      :goBack="true"
      :title="topTitle"
      :fatherIsTouch="isTouch"
      @cancelClick="cancelClick"
      @checkClick="checkClick"
      :currentTreeId="JSON.parse(this.$route.params.item).treeId"
      :form="'知识库'"
      @onSearch="onSearch"
      @onCancel="onCancel"
    ></nav-bar>

    <!-- 面包屑 -->
    <breadcrumb
      :breadcrumb="breadcrumb"
      :isKnowledgeTree="true"
      :fatherListData="listData"
      @handleFormatClick="handleFormatClick"
      v-if="listData.length > 0 || falge"
    ></breadcrumb>

    <!-- 数据列表 -->
    <div class="personal_outer">
      <div class="personal_content">
        <van-list
          v-model="loadMore"
          :finished="finished"
          finished-text="没有更多了"
          :immediate-check="false"
          @load="onLoadMore"
          offset="1"
        >
          <van-checkbox-group
            v-model="checkArr"
            ref="listCheck"
            @change="handleListCheckbox"
            max="1"
          >
            <data-list
              v-for="(item, index) in listData"
              :key="index"
              :title="item.fileName"
              :fileCategory="item.fileCategory"
              :label="item.createTime"
              :index="index"
              :menuParameter="menuParameter"
              :isCollection="item.isFavourite == 0 ? false : true"
              :isTouch="isTouch"
              :DetailsArr="listData[index]"
              v-longtap="() => handleTouch(item, index)"
              @handleDetailsClick="handleDetailsClick"
            ></data-list>
          </van-checkbox-group>
        </van-list>
      </div>
    </div>

    <operation-menu
      :menuParameter="menuParameter"
      isKnowledge
      v-show="isTouch"
      :checkArr="checkArr"
      @handleRemoveMessage="handleRemoveMessage"
      @KnowledgeTreeCancelCollection="KnowledgeTreeCancelCollection"
      :isFavourite="isFavourite"
    ></operation-menu>

    <transition name="van-slide-right">
    <van-popup
      class="detail"
      v-model="DetailShow"
      v-if="DetailShow"
      style="width: 100vw; height: 100vh;"
      :overlay="false"
    >
      <detail :DetailObj="DetailObj" @handleGoBack="(bol) => DetailShow = bol"></detail>
    </van-popup>
    </transition>
  </div>
</template>

<script>
import NavBar from "components/public/NavBar.vue";
import Breadcrumb from "components/public/Breadcrumb.vue";
import DataList from "components/public/DataList.vue";
import OperationMenu from "components/public/OperationMenu.vue";
import Detail from "components/public/Details.vue";

export default {
  name: "KnowledgeTreeList",
  components: {
    NavBar,
    Breadcrumb,
    DataList,
    OperationMenu,
    Detail,
  },
  data() {
    return {
      // 通用变量
      // 顶部标题
      topTitle: "",
      // 是否长按标识
      isTouch: false,
      checkArr: [],
      // 个人文档数据列表
      listData: [],

      // 搜索后数据中间变量
      middleware: [],

      // 是否加载面包屑， 用于格式筛选
      falge: false,

      // 将文件id和文件类型传给详情组件
      DetailsArr: [],
      // 将id和treeId传给操作菜单组件，用于操作事件
      menuParameter: {},
      // 长按选中的index下标
      activeIndex: 0,

      // 选中是否收藏
      isFavourite: false,
      // 上拉加载
      loadMore: false,
      finished: false,
      PageIndex: 1,
      PageSize: 10,
      total: 0,

      DetailShow: false,
      DetailObj: {},
    };
  },
  created() {
    this.getknowledgeTreeList(false);
    this.topTitle = JSON.parse(this.$route.params.item).label;
  },
  methods: {
    handleDetailsClick(obj) {
    //   console.log(obj)
      this.DetailObj = obj;
      this.DetailShow = true;
    },
    // 通用事件
    // 列表长按事件
    handleTouch(item, index) {
      // console.log("长按了");
      // console.log(item)
      this.activeIndex = index;
      this.checkArr.push(index);
      this.isTouch = true;
      // console.log(this.$route)
      // console.log(this.activeIndex)
    },
    // 监听多选按钮点击事件
    handleListCheckbox(arr) {
      // console.log(arr)
      // console.log(JSON.parse(this.$route.params.item).treeId)
      this.menuParameter.idArr = arr[0];
      this.menuParameter.treeId = JSON.parse(this.$route.params.item).treeId;
      this.menuParameter.resourcesId = this.listData[
        this.activeIndex
      ].resourcesId;
      this.menuParameter.type = this.listData[this.activeIndex].type;
      this.menuParameter.hdfsUrl = this.listData[this.activeIndex].hdfsUrl;
      this.isFavourite =
        this.listData[this.activeIndex].isFavourite == 0 ? false : true;

      // console.log(this.menuParameter)
    },
    // 监听移除成功事件，用于刷新页面
    handleRemoveMessage(bol) {
      if (bol) {
        this.listData.splice(this.activeIndex, 1);
        this.isTouch = false;
      }
    },
    // 子组件传过来的取消收藏事件
    KnowledgeTreeCancelCollection(bol) {
      if (bol) {
        this.listData[this.activeIndex].isFavourite = 0;
        this.isTouch = false;
      }
    },
    // 子组件传的取消事件
    cancelClick(bol) {
      // console.log(bol)
      this.isTouch = bol;
    },
    //
    checkClick(bol) {
      this.$refs.listCheck.toggleAll(bol);
    },
    // 上拉加载
    onLoadMore() {
      if (this.listData.length < this.total) {
        this.PageIndex = this.PageIndex + 1;
        this.getknowledgeTreeList(true);
      } else {
        // 数据全部加载完成
        this.finished = true;
      }
    },
    // 获取列表数据
    getknowledgeTreeList(bol) {
      this.$request({
        method: "get",
        url: "/api/KnowledgeTree/GetKnowledgeTreeByTreeId",
        params: {
          Token: sessionStorage.getItem("mobileToken"),
          treeId: JSON.parse(this.$route.params.item).treeId,
          Name: "",
          FileCategory: "",
          pageSize: this.PageSize,
          pageIndex: this.PageIndex,
        },
      }).then(({ data }) => {
        if (data.code == 200) {
          this.total = data.totalCount;

          // 时间转化
          data.knowledgeTreeFileList.forEach((item) => {
            let splitCreateTimeArr = [];
            splitCreateTimeArr = item.createTime.split("T");
            item.createTime =
              splitCreateTimeArr[0] + " " + splitCreateTimeArr[1];
          });

          if (bol) {
            this.listData.push(...data.knowledgeTreeFileList);
          } else {
            this.listData = data.knowledgeTreeFileList;
          }

          this.DetailsArr = this.listData.map(
            ({ fileId, type, resourcesId }) => ({ fileId, type, resourcesId })
          );
          // console.log(this.DetailsArr)
          // console.log(this.listData)
        } else {
          this.$notify("加载数据失败，请重试。");
        }

        // 加载状态结束
        this.loadMore = false;
      });
    },
    // 格式筛选事件
    handleFormatClick(arr, bol) {
      this.listData = arr;
      this.falge = bol;
    },
    // 搜索提交后展示的数据
    onSearch(list) {
      // console.log(list)
      this.middleware = this.listData;
      this.listData = list;
    },
    // 搜索取消事件
    onCancel(bol) {
      if (bol) {
        this.PageIndex = 1;
        this.PageSize = this.total;
        this.getknowledgeTreeList(false);
        this.finished = false;
        if (this.isTouch) {
          this.isTouch = false;
        }
      }
    },
  },
  computed: {
    breadcrumb() {
      let str = "知识库" + "," + JSON.parse(this.$route.params.item).label;
      let arr = str.split(",");
      return arr;
    },
  },
  watch: {
    isTouch(newVal) {
      if (newVal) {
        // this.topTitle = `已选中${this.checkArr.length}项`
        // this.topTitle = JSON.parse(this.$route.params.item).label
      } else {
        this.topTitle = JSON.parse(this.$route.params.item).label;
        // 非长按情况下情况多选款的值
        this.checkArr = [];
      }
      // console.log(newVal)
    },
    checkArr(newVal) {
      if (this.isTouch) {
        // this.topTitle = `已选中${this.checkArr.length}项`
        // this.topTitle = JSON.parse(this.$route.params.item).label
      }
    },
  },
};
</script>

<style lang="less" scoped>
.KnowledgeTreeList {
  height: 100%;
}
</style>